<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" :title="addEditName + title" :visible.sync="dialogVisible" width="40%"
        :before-close="handleClose">
        <!-- <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" :show-message="canInput"
            class="el-form">
            <el-form-item label="关联用户:" prop="personNo">
                <el-select v-model="ruleForm.personNo" class="w100p" clearable filterable @change="personData(ruleForm)">
                    <el-option v-for="items in person" :key="items.person.personNo" :label="items.person.name"
                        :value="items.person.personNo" />
                </el-select>
            </el-form-item>
            <el-form-item label="联系人名称:" prop="contactsName">
                <el-input v-model="ruleForm.contactsName" class="w100p" clearable />
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
                <el-input v-model="ruleForm.phone" class="w100p" clearable />
            </el-form-item>
            <el-form-item label="微信:" prop="weChat">
                <el-input v-model="ruleForm.weChat" class="w100p" clearable />
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
                <el-input v-model="ruleForm.email" class="w100p" clearable />
            </el-form-item>
        </el-form> -->
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules" class="el-form">
            <el-form-item label="通知名称:" class="w100p" prop="noticeConfigName">
                <el-input v-model="ruleForm.noticeConfigName" clearable placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="通知类型:" class="w100p" prop="noticeType">
                <el-select v-model="ruleForm.noticeType" placeholder="请选择">
                    <el-option label="允许丢失" :value="false" />
                    <el-option label="必须送达" :value="true" />
                </el-select>
            </el-form-item>
            <el-form-item label="通知人:" class="w100p" :required="true">
                <div class="tifier-add">
                    <el-button type="text" size="medium" @click="tifierAdd"><i class="el-icon-circle-plus"></i>
                        增加</el-button>
                </div>
                <div v-for="(item, index) in NotifierList" :key="index" class="w100p phone">
                    <el-select v-model="item.personNo" class="w50p" clearable filterable
                        @change="personData(item, index)">
                        <el-option v-for="items in person" :key="items.person.personNo" :label="items.person.name"
                            :value="items.person.personNo" />
                    </el-select>
                    <div class="w50p">
                        <el-radio v-model="item.radio" :label="1"
                            @change="tifierChange(item.radio, index)">全选</el-radio>
                        <el-radio v-model="item.radio" :label="2"
                            @change="tifierChange(item.radio, index)">全不选</el-radio>
                        <el-button class="text-btn-cursor cursor-delete" type="text" size="small"
                            @click="tifierDelete(item, index)"><i class="el-icon-delete"></i> 删除</el-button>
                    </div>
                    <div class="w100p">
                        <el-checkbox v-model="item.cidFlag" size="medium">APP</el-checkbox>
                        <el-checkbox v-model="item.phoneFlag" size="medium">手机</el-checkbox>
                        <el-checkbox v-model="item.emailFlag" size="medium">邮箱</el-checkbox>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import systemNotificationConfiguration from '@/api/system-notification-management/system-notification-configuration.js';
export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {
            addEditName: '添加',
            addEditApi: '',
            ruleForm: {},
            NotifierList: {
                userName: "",
                personNo: "",
                phoneFlag: false,
                weChatFlag: false,
                emailFlag: false,
                cidFlag: false,
                radio: 3
            },
            rules: {
                noticeType: [
                    { required: true, message: "请选择", trigger: "blur" }
                ],
                noticeConfigName: [
                    { required: true, message: "请填写姓名", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "请填写手机号", trigger: "blur" },
                    { type: "number", message: "手机号为数字" }
                ]
            }
        }
    },
    computed: {
        person() {
            return this.$store.state.initData.person || [];
        }
    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },
    mounted() { },
    methods: {
        async initData() {
            if (this.addEditFlag == 'add') {
                this.resetForm();
                this.addEditApi = systemNotificationConfiguration.add;
                this.addEditName = '添加';
                this.$set(this.ruleForm,'noticeType',true)
            } else if (this.addEditFlag == 'edit') {
                this.ruleForm = { ...this.data }
                const { data: rs } = await systemNotificationConfiguration.queryByNo(this.data.noticeConfigNo);
                this.addEditApi = systemNotificationConfiguration.edit;
                this.NotifierList = rs.noticeMethodList;
                this.addEditName = '编辑';
                this.$set(this.ruleForm,'noticeType',!!this.ruleForm.noticeType)
            }
        },
        personData(val, index) {
            this.person.forEach((item) => {
                if (val.personNo === item.personNo) {
                    console.log(val);
                    this.$set(this.NotifierList, index, {
                        ...val,
                        userName: item.userName
                    });
                }
            });
        },
        tifierChange(item, index) {
            let data = this.NotifierList[index]
            if (item === 1) {
                this.$set(this.NotifierList, index, {
                    ...data,
                    cidFlag: true,
                    weChatFlag: true,
                    phoneFlag: true,
                    radio: 1,
                    emailFlag: true
                });
            } else if (item === 2) {
                this.$set(this.NotifierList, index, {
                    ...data,
                    cidFlag: false,
                    weChatFlag: false,
                    phoneFlag: false,
                    radio: 2,
                    emailFlag: false
                });
            } else {
                this.$set(this.NotifierList, index, {
                    radio: 3
                });
            }
        },
        tifierDelete(item, index) {
            this.NotifierList.splice(index, 1);
        },
        tifierAdd() {
            this.NotifierList.push({
                userName: "",
                personNo: "",
                phoneFlag: false,
                weChatFlag: false,
                emailFlag: false,
                cidFlag: false,
                radio: 3
            });
        },
        //提交表单
        submitForm() {
            if (this.NotifierList.filter(item => { return item.personNo }).length == 0) {
                this.$message.warning('请先添加通知方式及通知人');
                return
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.ruleForm.noticeMethodList = this.NotifierList;
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        let msg = res.code == 1 ? '操作成功' : '操作失败'
                        this.$message[res.code == 1 ? 'success' : 'warning'](res.msg || msg)
                        res.code == 1 && this.cancel();
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.NotifierList = [];
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped></style>